Scrolling
Description
Settings for configuring the scroll behavior for a Panel.
Body can scroll
Specify if the Body can be scrolled.
Body scroll axis
Body scroll axis has three settings: 'Horizontal', 'Vertical', and 'Both'. When set to 'Vertical', the panel body can only be scrolled up and down (top to bottom). When set to 'Horizontal', the panel body can only be scrolled left and right. When set to 'Both', the panel body can be scrolled in all directions.
If you have built an application where swiping left or left navigates to other panels, you should set the Body scroll axis to 'Vertical'.
Body stop drag propogation
Specify if drag events should be propagated to containing elements.
Scroll to top on focus
If enabled, the panel body will automatically scroll to the top of the panel card when the panel receives focus.
'Pull past end' settings and events
Specify if the user can drag the contents of the Panel Card beyond any of its boundaries. If enabled, the content will snap back to its natural position when the user releases, and 'pull' events (which you can define) are fired.
The following settings are available for configuring the 'Pull past end' behavior:
Vertical direction
Specify under what conditions the user can 'pull' (i.e. drag) the Panel Card beyond its top or bottom end point. When the user stops pulling on the Panel Card, the Panel animates back to its natural position.
Available options are:
- Option
- Description
- auto
Drag past end will only be allowed if there is any scrollable content in the control.
- always
Drag past end will always be allowed.
- never
Drag past end will never be allowed.
Horizontal direction
Specify under what conditions the user can 'pull' (i.e. drag) the Panel Card beyond its left or right end point. When the user stops pulling on the Panel Card, the Panel animates back to its natural position.
The options available are auto, always, and never. See Vertical direction above for an explanation of each option.
onPull event
Fires repeatedly while the user is pulling on the content.
See onPull Event for more information.
onPullRelease event
Fires when the user releases the 'pulled' content if the content is in a 'pulled past end' state.
See onPullRelease Event for more information.
onPullEnd event
Fires when the user has 'pulled' content beyond an end point but has then restores the content to its 'non-pulled' state. Fires when the content is restored to its 'non-pulled' state. The use case for this event is to allow the user to cancel an action that would be triggered by some 'pull past end' action.
See onPullEnd Event for more information.
Custom scroll indicator settings
You can customize the position and appearance of the scroll indicator that is shown when the Panel Card is scrolled
Configuring a Horizontal Scroller
The horizontal scroller lets the user scroll content along the x-axis (left to right). If the horizontal scroller is disabled (Show Horizontal scroll indicator), the horizontal scroller is not shown when the panel is scrolled horizontally.
Disabling the horizontal scroll indicator does not disable horizontal scrolling. To disable horizontal scrolling, see the Body can scroll and Body scroll axis properties.
Options include:
- Property
- Description
- Show Horizontal scroll indicator
Enables or disables a scroll indicator shown when the Panel is scrolled horizontally (left to right/right to left.) Enabled by default.
- Horizontal indicator classname
The classname applied to the area where the scroll indicator moves.
If you are using the system Alpha web theme, the default classname for the horizontal indicator is scrollIndH.
- Horizontal scroll bar classname
The classname applied to the scroll position indicator.
If you are using the system Alpha web theme, the default classname for the horizontal scroll bar is scrollIndHBar.
- Horizontal scroll indicator location
The location of the horizontal scroll indicator. The indicator can be position at the 'top' or 'bottom' of the Panel card. Default is 'bottom'.
- Horizontal offset
The space between the scroll indicator and the edge of the panel (either top or bottom as defined by the Horizontal scroll indicator location property.) The offset is defined using CSS units. Default is 0px.
- Horizontal left offset
The space between the left edge of the scroll indicator and the left edge of the Panel. The offset is defined using CSS units. Default is 0px.
- Horizontal right offset
The space between the right edge of the scroll indicator and the right edge of the Panel. The offset is defined using CSS units. Default is 0px.
Configuring a Vertical Scroller
The vertical scroller lets the user scroll content along the y-axis (top to bottom). If the vertical scroller is disabled (Show Vertical scroll indicator), the vertical scroller is not shown when the panel is scrolled vertically.
Disabling the vertical scroll indicator does not disable vertical scrolling. To disable vertical scrolling, see the Body can scroll and Body scroll axis properties.
Options include:
- Show Vertical scroll indicator
Enables or disables a scroll indicator shown when the Panel is scrolled Vertical (top to bottom/bottom to top.) Enabled by default.
- Vertical indicator classname
The classname applied to the area where the scroll indicator moves.
If you are using the system Alpha web theme, the default classname for the vertical indicator is scrollIndV.
- Vertical scroll bar classname
The classname applied to the scroll position indicator.
If you are using the system Alpha web theme, the default classname for the vertical scroll bar is scrollIndVBar.
- Vertical scroll indicator location
The location of the vertical scroll indicator. The indicator can be position at the 'left' or 'right' of the Panel card. Default is 'right'.
- Vertical offset
The space between the scroll indicator and the edge of the panel (either left or right as defined by the Vertical scroll indicator location property.) The offset is defined using CSS units. Default is 0px.
- Vertical top offset
The space between the top edge of the scroll indicator and the top edge of the Panel. The offset is defined using CSS units. Default is 0px.
- Vertical bottom offset
The space between the bottom edge of the scroll indicator and the bottom edge of the Panel. The offset is defined using CSS units. Default is 0px.
See Also